<template>
  <div>
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入小区或地址"
        background="rgba(0,0,0,0)"
      >
        <!-- @click.native="$router.push('/city')" -->
        <!-- native 给组件加事件的时候 -->
        <template #label>
          <div @click="$router.push('/city')">{{ city }} ▼</div>
        </template>
        <template #action>
          <div @click="$router.push('/map')">
            <van-icon name="location-o" size="25px" color="white" />
          </div>
        </template>
      </van-search>
    </div>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipelist" :key="item.id"
          ><img :src="url + item.imgSrc"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav">
      <van-grid :border="false" :column-num="4">
        <van-grid-item to="/lookhouse">
          <van-icon name="home-o" size="36px" color="#74d2ab" />
          <span>整租</span>
        </van-grid-item>
        <van-grid-item to="/lookhouse">
          <van-icon name="friends-o" size="36px" color="#74d2ab" />
          <span>合租</span>
        </van-grid-item>
        <van-grid-item to="/map">
          <van-icon name="guide-o" size="36px" color="#74d2ab" />
          <span>地图找房</span>
        </van-grid-item>
        <van-grid-item to="/login">
          <van-icon name="wap-home-o" size="36px" color="#74d2ab" />
          <span>出去租</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="box">
      <van-cell title="租房小组" value="更多" />
      <van-grid direction="horizontal" :column-num="2" :gutter="10">
        <van-grid-item
          icon="photo-o"
          text="文字"
          v-for="item in RentalTeam"
          :key="item.id"
        >
          <van-image :src="url + item.imgSrc" width="40px" height="40px" />
          <div class="neirong">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { swipe, RentalTeam } from '@/api/index'
import { getCity } from '@/utils/storage'
export default {
  name: 'article-page',
  components: {},
  props: {},
  data() {
    return {
      url: 'http://liufusong.top:8080',
      value: '',
      swipelist: [],
      RentalTeam: [],
      city: getCity().label || '北京'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await swipe()
    this.swipelist = res.data.body
    // console.log(res.data.body)
    const data = await RentalTeam({ area: 'AREA|88cff55c-aaa4-e2e0' })
    this.RentalTeam = data.data.body
    // console.log(data.data.body)
  },
  methods: {
    onSearch() {
      this.$router.push('/city')
      // console.log(1)
    }
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
.search {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
}
.box {
  background-color: #f6f5f6;
  padding-bottom: 20px;
  .neirong {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    p {
      font-size: 14px;
    }
  }
}
.nav span {
  font-size: 13px;
  margin-top: 10px;
  color: #000;
}
::v-deep .van-grid-item__content--center {
  margin-right: 10px;
  justify-content: start;
}
.van-image {
  margin-right: 20px;
}
.van-search__content {
  padding-left: 8px;
}
.van-cell {
  background-color: #f6f5f6;
}
.van-icon-home-o,
.van-icon-friends-o,
.van-icon-guide-o,
.van-icon-wap-home-o {
  background-color: rgba(217, 244, 233, 0.5);
  border-radius: 50%;
  padding: 8px;
}
</style>
